import React, { useEffect, useState } from 'react'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import { http } from "libs";
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import css from './index.module.less' // 项目自定义css

// 使用时安装以下2个依赖包
// "@wangeditor/editor": "^5.1.15",
// "@wangeditor/editor-for-react": "^1.0.5",

function MyEditor({ value, onChange, path }) {
  const [editor, setEditor] = useState()// editor实例
  const [html, setHtml] = useState('') // 编辑器内容

  // 工具栏配置
  const toolbarConfig = {}

  // 编辑器配置
  const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {
      // 上传图片
      uploadImage: {
        // 自定义上传
        async customUpload(file, insertFn) {
          // file 即选中的文件，自己实现上传，并得到图片 url alt href
          await getExtraData(file, `${path ?? 'richText'}/image/`)
          await upload(file)
          insertFn(file.url, file.name, file.url)
        }
      },
      // 上传视频
      uploadVideo: {
        // 自定义上传
        async customUpload(file, insertFn) {
          // file 即选中的文件，自己实现上传，并得到视频 url poster
          await getExtraData(file, `${path ?? 'richText'}/video/`)
          await upload(file)
          insertFn(file.url, file.poster || '')
        }
      },
    }
  }

  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (editor == null) return
      editor?.destroy()
      setEditor(null)
    }
  }, [editor])

  // 接收赋值
  useEffect(() => {
    setHtml(value)
  }, [value])

  // 获取oss加密信息
  function getExtraData(file, path) {
    const suffix = file.name.slice(file.name.lastIndexOf('.'))
    return http.get('/api/oss/sign/', { params: { path, suffix } })
      .then(res => {
        file.url = `${res.host}/${res.key}`
        file.extarData = res
        return res.host
      })
  }

  // 上传
  function upload(file) {
    const formData = new FormData();
    Object.keys(file.extarData).forEach((key) => {
      formData.append(key, file.extarData[key]);
    });
    formData.append('file', file)
    return http.post(file.extarData.host, formData)
  }

  // 传递新值给外部
  function handleChane(val) {
    setHtml(val)
    onChange(val)
  }

  return (
    <div className={css.editorContent}>
      <Toolbar
        editor={editor}
        defaultConfig={toolbarConfig}
        mode="default"
        className={css.toolBar}
      />
      <Editor
        className={css.editor}
        defaultConfig={editorConfig}
        value={html}
        onCreated={setEditor}
        onChange={editor => handleChane(editor.getHtml())}
        mode="default"
      />
    </div>
  )
}

export default MyEditor
